import { Text, View } from "@tarojs/components";
import styles from "./index.scss";
import { Button, Form, Input } from "@nutui/nutui-react-taro";
import { setToken } from "@/utils/token";
import Taro from "@tarojs/taro";
import { login, register } from "@/services/User";
import { useRequest } from "taro-hooks";
import { EmailReg } from "@/constants/reg";
import InputPassword from "@/components/Input/InputPassword";

const Index = () => {
  const [form] = Form.useForm();
  const { run } = useRequest(register, {
    manual: true,
    onSuccess: (res: string) => {
      console.log(res);
      Taro.reLaunch({ url: "/loginAndRegister/login/index" });
    },
  });
  return (
    <View className={styles.container}>
      <View className={styles.title}>欢迎注册家庭物资管理系统</View>
      <View className={styles.content}>
        <Form
          labelPosition="top"
          starPosition="right"
          form={form}
          onFinish={(v) => {
            run({
              username: v.username,
              password: v.password,
              email: v?.email,
            });
          }}
          footer={
            <View className={styles.footer}>
              <View className={styles.register}>
                <Text>已有账号？</Text>
                <Text
                  className={styles.toRegister}
                  onClick={() => {
                    Taro.reLaunch({ url: "/loginAndRegister/login/index" });
                  }}
                >
                  前往登录
                </Text>
              </View>
              <Button className={styles.btn} onClick={() => form.submit()}>
                注册
              </Button>
            </View>
          }
        >
          <Form.Item
            label="账号"
            name="username"
            required
            rules={[
              {
                required: true,
                message: "账号不能为空",
              },
              { max: 10, message: "账号不超过10位" },
            ]}
          >
            <Input className={styles.input} placeholder="请输入账号" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            required
            rules={[
              {
                required: true,
                message: "密码不能为空",
              },
              { max: 10, message: "密码不超过10位" },
            ]}
          >
            <InputPassword className={styles.input} placeholder="请输入密码" />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirmPassword"
            required
            rules={[
              {
                validator: (ruleCfg, value) => {
                  return !!value && form.getFieldValue("password") === value;
                },
                message: "两次密码不一致",
              },
            ]}
          >
            <InputPassword
              className={styles.input}
              placeholder="请输入确认密码"
            />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              {
                validator: (ruleCfg, value) => {
                  if (!value) {
                    return true;
                  }
                  return EmailReg.test(value);
                },
                message: "请输入正确的邮箱",
              },
            ]}
          >
            <Input className={styles.input} placeholder="请输入邮箱" />
          </Form.Item>
        </Form>
      </View>
    </View>
  );
};

export default Index;
